<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box{
            height: 100px;
            width: 100px;
            background-color: aquamarine;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        我是大富婆!!!
        我是大富婆!!!
        我是大富婆!!!
        我是大富婆!!!
        我是大富婆!!!
        我是大富婆!!!
    </div>
</body>
<script>
    var div=document.getElementsByClassName('box')[0];

    //鼠标刚进入元素时触发
    // div.onmouseover=function(){
    //     console.log('鼠标进入了');
    // }

    //鼠标刚离开元素时触发 
    //()里的内容可以获得事件对象event,一般写e
    div.onmouseout=function(e){
        console.log('鼠标离开了');
        console.log(e);
    }

    //鼠标在元素上移动时触发
    div.onmousemove=function(){
        console.log('鼠标移动了');
    }

    //鼠标完全进入元素时触发
    div.onmouseenter=function(){
        console.log('鼠标完全进入了');
    }

    //鼠标完全离开元素时触发
    div.onmouseleave=function(){
        console.log('鼠标完全离开了');
    }

    //鼠标完全离开元素时触发
    div.onmouseleave=function(){
        console.log('鼠标完全离开了');
    }

    //鼠标摁下元素时触发
    div.onmousedown=function(){
        console.log('鼠标摁下了');
    }
    
    //鼠标松开(弹起)元素时触发
    div.onmouseup=function(){
        console.log('鼠标松开了');
    }

    //鼠标单击元素时触发
    div.onclick=function(){
        console.log('鼠标单击了一下');
    }

    //鼠标双击元素时触发
    div.ondblclick=function(){
        console.log('鼠标双击了一下');
    }

    //鼠标滚轮滚动时触发
    div.onmousewheel=function(){
        console.log('鼠标滚轮滚动');
    }

    //元素滚动时触发
    div.onscroll=function(){
        console.log('元素滚动了');
    }

    
</script>
</html>